// 导入http.js中的方法
import { getUserSessions, getChatMessages, deleteSession, sendChatMessage, updateSession } from './http.js';

// 当前页码和每页数量
let currentPage = 1;
const pageSize = 10;
// 当前会话ID
let currentSessionId = null;

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 检查localStorage中是否存在token
  const token = localStorage.getItem('token');
  if (!token) {
    // 未登录，跳转到登录页面
    window.location.href = 'index.html';
    return;
  }
  
  // 加载会话列表
  loadChatSessions();
  
  // 绑定新建会话按钮事件
  const newChatButton = document.querySelector('.new-chat-btn');
  if (newChatButton) {
    newChatButton.addEventListener('click', createNewChat);
  }
  
  // 绑定侧边栏切换功能
  setupSidebarToggle();
  
  // 设置文本区域自动调整高度
  setupTextareaAutoResize();
  
  // 绑定发送消息事件
  setupMessageSending();
  
  // 绑定退出登录按钮事件
  const logoutBtn = document.getElementById('logoutBtn');
  if (logoutBtn) {
    logoutBtn.addEventListener('click', () => {
      localStorage.removeItem('token');
      window.location.href = 'index.html';
    });
  }
  
  // 显示初始欢迎消息
  showWelcomeMessage();
});

/**
 * 显示欢迎消息
 */
function showWelcomeMessage() {
  // 清空聊天区域
  const chatMessages = document.querySelector('.chat-messages');
  if (chatMessages) {
    chatMessages.innerHTML = '';
    
    // 添加欢迎消息
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message ai';
    
    const messageContent = document.createElement('div');
    messageContent.className = 'message-content';
    messageContent.innerHTML = 'Hi~ 我是MadiChat 你身边的智能助手';
    
    const messageTime = document.createElement('div');
    messageTime.className = 'message-time';
    messageTime.textContent = getCurrentTime();
    
    const avatar = document.createElement('img');
    avatar.className = 'avatar';
    avatar.src = aiAvatar;
    avatar.alt = 'AI';
    
    messageDiv.appendChild(messageContent);
    messageDiv.appendChild(messageTime);
    messageDiv.appendChild(avatar);
    
    chatMessages.appendChild(messageDiv);
  }
  
  // 更新标题为"新对话"
  const titleElement = document.querySelector('#currentChatTitle span');
  if (titleElement) {
    titleElement.textContent = '新对话';
  }
}

/**
 * 设置侧边栏切换功能
 */
function setupSidebarToggle() {
  window.toggleSidebar = function() {
    document.getElementById('sidebar').classList.toggle('show');
  };
}

/**
 * 设置文本区域自动调整高度
 */
function setupTextareaAutoResize() {
  const textarea = document.querySelector('textarea');
  if (textarea) {
    textarea.addEventListener('input', function() {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight) + 'px';
      if (this.scrollHeight > 150) {
        this.style.height = '150px';
        this.style.overflowY = 'auto';
      } else {
        this.style.overflowY = 'hidden';
      }
    });
  }
}

/**
 * 设置发送消息事件
 */
function setupMessageSending() {
  const chatMessages = document.querySelector('.chat-messages');
  const sendButton = document.querySelector('.send-btn');
  const messageInput = document.querySelector('textarea');
  
  if (sendButton && messageInput) {
    sendButton.addEventListener('click', async function() {
      const message = messageInput.value.trim();
      if (message) {
        // 添加用户消息
        addMessage(message, true);
        
        // 清空输入框并重置高度
        messageInput.value = '';
        messageInput.style.height = 'auto';
        
        // 检查是否是新会话（当前会话ID为空）
        if (!currentSessionId) {
          // 创建新会话
          createSessionFromMessage(message);
        }
        
        // 调用后端API发送消息
        await sendMessageToAPI(message);
      }
    });
    
    // 添加按Enter键发送消息的功能
    messageInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendButton.click();
      }
    });
  }
}

function generateUUID() {
  const array = new Uint8Array(16);
  crypto.getRandomValues(array);

  // 手动设置 UUID 版本（第 13 个字符为 4，表示版本 4）
  array[6] = (array[6] & 0x0f) | 0x40;
  array[8] = (array[8] & 0x3f) | 0x80;

  return Array.from(array, (byte, i) => {
    const char = byte.toString(16).padStart(2, '0');
    // 添加分隔符
    if (i === 3 || i === 5 || i === 7 || i === 9) {
      return char + '-';
    }
    return char;
  }).join('');
}

/**
 * 从消息创建新会话
 * @param {string} message - 用户消息内容
 */
function createSessionFromMessage(message) {
  // 获取消息前5个字符作为标题（如果不足5个字符则使用全部）
  let title = message.length > 5 ? message.substring(0, 5) + '...' : message;
  
  // 获取当前时间
  const now = new Date();
  const formattedDate = '今天 ' + now.getHours() + ':' + now.getMinutes().toString().padStart(2, '0');
  
  // 创建新会话元素
  const chatList = document.querySelector('.chat-list');
  if (chatList) {
    // 移除所有会话的活跃状态
    document.querySelectorAll('.chat-item').forEach(item => {
      item.classList.remove('active');
    });
    
    // 创建新会话元素
    const newChatItem = document.createElement('div');
    newChatItem.className = 'chat-item active';
    
    // 生成临时会话ID（实际应用中应该由后端生成）
    const tempSessionId = generateUUID();
    newChatItem.dataset.id = tempSessionId;
    
    // 设置当前会话ID
    currentSessionId = tempSessionId;
    
    // 设置会话内容
    newChatItem.innerHTML = `
      <div class="chat-item-content">
        <div class="title">${escapeHtml(title)}</div>
        <div class="date">${formattedDate}</div>
      </div>
      <div class="chat-item-menu" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fas fa-ellipsis-v"></i>
      </div>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item edit-chat" href="#"><i class="fas fa-edit me-2"></i>编辑名称</a></li>
        <li><a class="dropdown-item toggle-pin" href="#"><i class="fas fa-thumbtack me-2"></i>置顶</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item text-danger delete-chat" href="#"><i class="fas fa-trash-alt me-2"></i>删除</a></li>
      </ul>
    `;
    
    // 将新会话添加到列表顶部
    if (chatList.firstChild) {
      chatList.insertBefore(newChatItem, chatList.firstChild);
    } else {
      chatList.appendChild(newChatItem);
    }
    
    // 更新聊天标题
    const titleElement = document.querySelector('#currentChatTitle span');
    if (titleElement) {
      titleElement.textContent = title;
    }
    
    // 绑定新会话的事件
    bindChatItemEvents();
    
    // TODO: 调用后端API创建新会话
    console.log('创建新会话:', {
      title: title,
      createTime: now.toISOString()
    });
  }
}

/**
 * 加载会话列表
 */
async function loadChatSessions() {
  try {
    const chatListContainer = document.querySelector('.chat-list');
    if (!chatListContainer) return;
    
    // 显示加载状态
    chatListContainer.innerHTML = '<div class="text-center p-3"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';
    
    // 获取会话列表数据
    const response = await getUserSessions(currentPage, pageSize);
    
    // 清空容器
    chatListContainer.innerHTML = '';
    
    // 检查是否有会话数据
    if (!response.data.result || response.data.result.length === 0) {
      chatListContainer.innerHTML = '<div class="text-center p-3">暂无会话记录</div>';
      return;
    }
    
    // 渲染会话列表
    response.data.result.forEach(session => {
      const chatItem = createChatSessionElement(session);
      chatListContainer.appendChild(chatItem);
    });
    
    // 绑定会话项点击事件
    bindChatItemEvents();
    
  } catch (error) {
    console.error('加载会话列表失败:', error);
    const chatListContainer = document.querySelector('.chat-list');
    if (chatListContainer) {
      chatListContainer.innerHTML = '<div class="text-center p-3 text-danger">加载失败，请重试</div>';
    }
  }
}

/**
 * 创建会话项DOM元素
 * @param {Object} session - 会话数据
 * @returns {HTMLElement} - 会话项DOM元素
 */
function createChatSessionElement(session) {
  const chatItem = document.createElement('div');
  chatItem.className = 'chat-item';
  chatItem.dataset.id = session.id;
  
  // 暂时不提供置顶功能
  /*
  // 如果是置顶会话，添加置顶样式
  if (session.pinned) {
    chatItem.classList.add('pinned');
  }
  */
  
  chatItem.innerHTML = `
    <div class="chat-item-content">
      <div class="title">${escapeHtml(session.title)}</div>
      <div class="date">${formatDate(session.updateTime)}</div>
    </div>
    <div class="chat-item-menu" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
      <i class="fas fa-ellipsis-v"></i>
    </div>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item edit-chat" href="#"><i class="fas fa-edit me-2"></i>编辑名称</a></li>
      <!-- 暂时不提供置顶功能 -->
      <!-- <li><a class="dropdown-item toggle-pin" href="#"><i class="fas fa-thumbtack me-2"></i>${session.pinned ? '取消置顶' : '置顶'}</a></li> -->
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item text-danger delete-chat" href="#"><i class="fas fa-trash-alt me-2"></i>删除</a></li>
    </ul>
  `;
  
  return chatItem;
}

/**
 * 绑定会话项点击事件
 */
function bindChatItemEvents() {
  // 会话项点击事件
  document.querySelectorAll('.chat-item').forEach(item => {
    // 点击会话内容区域加载对话
    item.querySelector('.chat-item-content').addEventListener('click', () => {
      // 移除所有活跃状态
      document.querySelectorAll('.chat-item').forEach(el => el.classList.remove('active'));
      // 设置当前项为活跃状态
      item.classList.add('active');
      
      // 加载对话内容
      const sessionId = item.dataset.id;
      console.info("pppp:" + sessionId)
      loadChatMessages(sessionId);
    });
    
    // 编辑会话名称
    item.querySelector('.edit-chat').addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      const sessionId = item.dataset.id;
      editChatSession(sessionId);
    });
    
    // 暂时不提供置顶功能
    /* 
    // 置顶/取消置顶会话
    item.querySelector('.toggle-pin').addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      const sessionId = item.dataset.id;
      const isPinned = item.classList.contains('pinned');
      togglePinChatSession(sessionId, !isPinned);
    });
    */
    
    // 删除会话
    item.querySelector('.delete-chat').addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      const sessionId = item.dataset.id;
      deleteChatSession(sessionId);
    });
  });
}

/**
 * 格式化日期
 * @param {string} dateString - ISO格式的日期字符串
 * @returns {string} - 格式化后的日期字符串
 */
function formatDate(dateString) {
  const date = new Date(dateString);
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);
  
  // 如果是今天
  if (date >= today) {
    return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }
  
  // 如果是昨天
  if (date >= yesterday) {
    return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }
  
  // 其他日期
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}

/**
 * 转义HTML特殊字符
 * @param {string} text - 原始文本
 * @returns {string} - 转义后的文本
 */
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

/**
 * 加载聊天消息
 * @param {string} sessionId - 会话ID
 */
async function loadChatMessages(sessionId) {
  try {
    // 更新当前会话ID
    currentSessionId = sessionId;
    
    // 清空聊天区域
    const chatMessages = document.querySelector('.chat-messages');
    if (!chatMessages) return;
    
    // 显示加载状态
    chatMessages.innerHTML = '<div class="text-center p-3"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';
    
    // 获取会话标题并更新
    const chatItem = document.querySelector(`.chat-item[data-id="${sessionId}"]`);
    if (chatItem) {
      const titleElement = document.querySelector('#currentChatTitle span');
      if (titleElement) {
        titleElement.textContent = chatItem.querySelector('.title').textContent;
      }
    }

    // 关闭移动端侧边栏
    const sidebar = document.getElementById('sidebar');
    if (sidebar && window.innerWidth < 768) {
        sidebar.classList.remove('show');
    }
    
    // 调用API获取历史消息
    const response = await getChatMessages(sessionId);
    
    // 清空聊天区域
    chatMessages.innerHTML = '';
    
    // 检查是否有消息数据
    if (!response.data.result || response.data.result.length === 0) {
      // 如果没有消息，显示欢迎消息
      showWelcomeMessage();
      return;
    }
    
    // 按时间顺序排序消息（从早到晚）
    const messages = response.data.result.sort((a, b) => {
      return new Date(a.createTime) - new Date(b.createTime);
    });
    
    // 渲染消息列表
    messages.forEach(message => {
      // 根据消息角色判断是用户消息还是AI消息
      const isUser = message.role === 'user';
      
      // 添加消息到界面
      const messageDiv = document.createElement('div');
      messageDiv.className = `message ${isUser ? 'user' : 'ai'}`;
      
      const messageContent = document.createElement('div');
      messageContent.className = 'message-content';
      messageContent.innerHTML = message.content;
      
      const messageTime = document.createElement('div');
      messageTime.className = 'message-time';
      // 格式化消息时间
      const msgDate = new Date(message.createTime);
      messageTime.textContent = `${msgDate.getHours().toString().padStart(2, '0')}:${msgDate.getMinutes().toString().padStart(2, '0')}`;
      
      const avatar = document.createElement('img');
      avatar.className = 'avatar';
      avatar.src = isUser ? userAvatar : aiAvatar;
      avatar.alt = isUser ? 'User' : 'AI';
      
      messageDiv.appendChild(messageContent);
      messageDiv.appendChild(messageTime);
      messageDiv.appendChild(avatar);
      
      chatMessages.appendChild(messageDiv);
    });
    
    // 滚动到底部
    chatMessages.scrollTop = chatMessages.scrollHeight;
  } catch (error) {
    console.error('加载会话消息失败:', error);
    const chatMessages = document.querySelector('.chat-messages');
    if (chatMessages) {
      chatMessages.innerHTML = `<div class="text-center p-3 text-danger">加载失败: ${error.message}</div>`;
    }
  }
}

/**
 * 编辑会话名称
 * @param {string} sessionId - 会话ID
 */
function editChatSession(sessionId) {
  const chatItem = document.querySelector(`.chat-item[data-id="${sessionId}"]`);
  if (!chatItem) return;
  
  const titleElement = chatItem.querySelector('.title');
  const currentTitle = titleElement.textContent;
  
  // 获取模态框元素
  const editModal = document.getElementById('editTitleModal');
  const titleInput = document.getElementById('chatTitleInput');
  const saveTitleBtn = document.getElementById('saveTitleBtn');
  
  // 设置当前标题
  titleInput.value = currentTitle;
  
  // 显示模态框
  const modal = new bootstrap.Modal(editModal);
  modal.show();
  
  // 聚焦输入框
  titleInput.focus();
  
  // 绑定保存按钮事件
  const handleSaveTitle = async () => {
    const newTitle = titleInput.value.trim();
    if (newTitle && newTitle !== currentTitle) {
      try {
        // 显示保存中状态
        saveTitleBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
        saveTitleBtn.disabled = true;
        
        // 调用更新会话API
        await updateSession(sessionId, newTitle);
        
        // 更新UI
        titleElement.textContent = newTitle;
        
        // 如果是当前会话，也更新顶部标题
        if (sessionId === currentSessionId) {
          const headerTitle = document.querySelector('#currentChatTitle span');
          if (headerTitle) {
            headerTitle.textContent = newTitle;
          }
        }
        
        // 显示成功提示
        showToast('会话名称已更新', 'success');
        
        // 关闭模态框
        modal.hide();
      } catch (error) {
        console.error('更新会话名称失败:', error);
        showToast(`更新失败: ${error.message}`, 'danger');
      } finally {
        // 恢复按钮状态
        saveTitleBtn.innerHTML = '保存';
        saveTitleBtn.disabled = false;
      }
    } else if (!newTitle) {
      showToast('会话名称不能为空', 'warning');
    } else {
      // 标题未变，直接关闭
      modal.hide();
    }
    
    // 解绑事件，避免多次绑定
    saveTitleBtn.removeEventListener('click', handleSaveTitle);
  };
  
  // 先移除可能存在的旧事件监听器
  saveTitleBtn.removeEventListener('click', handleSaveTitle);
  // 绑定保存按钮点击事件
  saveTitleBtn.addEventListener('click', handleSaveTitle);
  
  // 绑定回车键提交
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleSaveTitle();
    }
  };
  
  // 先移除可能存在的旧事件监听器
  titleInput.removeEventListener('keydown', handleKeyDown);
  // 绑定回车键事件
  titleInput.addEventListener('keydown', handleKeyDown);
  
  // 模态框关闭时移除事件监听
  editModal.addEventListener('hidden.bs.modal', () => {
    saveTitleBtn.removeEventListener('click', handleSaveTitle);
    titleInput.removeEventListener('keydown', handleKeyDown);
  }, { once: true });
}

/**
 * 置顶/取消置顶会话 - 暂时不提供此功能
 * @param {string} sessionId - 会话ID
 * @param {boolean} isPinned - 是否置顶
 */
/*
function togglePinChatSession(sessionId, isPinned) {
  const chatItem = document.querySelector(`.chat-item[data-id="${sessionId}"]`);
  if (!chatItem) return;
  
  // TODO: 调用置顶/取消置顶API
  console.log('置顶/取消置顶会话:', sessionId, isPinned);
  
  // 更新UI
  const pinButton = chatItem.querySelector('.toggle-pin');
  if (isPinned) {
    chatItem.classList.add('pinned');
    pinButton.innerHTML = '<i class="fas fa-thumbtack me-2"></i>取消置顶';
    
    // 移动到列表顶部
    const chatList = chatItem.parentElement;
    chatList.insertBefore(chatItem, chatList.firstChild);
  } else {
    chatItem.classList.remove('pinned');
    pinButton.innerHTML = '<i class="fas fa-thumbtack me-2"></i>置顶';
    
    // 重新加载列表以正确排序
    loadChatSessions();
  }
}
*/


/**
 * 删除会话
 * @param {string} sessionId - 会话ID
 */
function deleteChatSession(sessionId) {
  // 获取模态框元素
  const deleteModal = document.getElementById('deleteConfirmModal');
  const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
  
  // 存储当前会话ID，用于确认按钮点击时使用
  deleteModal.dataset.sessionId = sessionId;
  
  // 使用data-bs-toggle和data-bs-target属性触发模态框
  // 创建一个临时按钮来触发模态框
  const tempBtn = document.createElement('button');
  tempBtn.setAttribute('data-bs-toggle', 'modal');
  tempBtn.setAttribute('data-bs-target', '#deleteConfirmModal');
  document.body.appendChild(tempBtn);
  tempBtn.click();
  document.body.removeChild(tempBtn);
  
  // 绑定确认删除按钮事件
  const handleConfirmDelete = async () => {
    try {
      // 显示加载状态
      confirmDeleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 删除中...';
      confirmDeleteBtn.disabled = true;
      // 调用删除会话API
      await deleteSession(sessionId);

      // 从UI中移除
      const chatItem = document.querySelector(`.chat-item[data-id="${sessionId}"]`);
      if (chatItem) {
        chatItem.remove();
        
        // 如果没有会话了，显示提示
        const chatList = document.querySelector('.chat-list');
        if (chatList && chatList.children.length === 0) {
          chatList.innerHTML = '<div class="text-center p-3">暂无会话记录</div>';
        }
        // 如果删除的是当前会话，创建新会话
        if (sessionId === currentSessionId) {
          createNewChat();
        }
      }
      // 显示成功提示
      showToast('删除成功', 'success');
      
    } catch (error) {
      console.error('删除会话失败:', error);
      showToast(`删除失败: ${error.message}`, 'danger');
    } finally {
      // 恢复按钮状态
      confirmDeleteBtn.innerHTML = '删除';
      confirmDeleteBtn.disabled = false;
      
      // 解绑事件，避免多次绑定
      confirmDeleteBtn.removeEventListener('click', handleConfirmDelete);
    }
  };
  
  // 先移除可能存在的旧事件监听器
  confirmDeleteBtn.removeEventListener('click', handleConfirmDelete);
  // 绑定确认按钮点击事件
  confirmDeleteBtn.addEventListener('click', handleConfirmDelete);
}

/**
 * 显示提示消息
 * @param {string} message - 提示消息
 * @param {string} type - 提示类型（success, danger, warning, info）
 * @param {boolean} autoHide - 是否自动隐藏
 * @returns {HTMLElement} - 提示元素
 */
function showToast(message, type = 'info', autoHide = true) {
  const toastContainer = document.getElementById('toastContainer');
  if (!toastContainer) return null;
  
  const toastElement = document.createElement('div');
  toastElement.className = `toast align-items-center text-white bg-${type} border-0`;
  toastElement.setAttribute('role', 'alert');
  toastElement.setAttribute('aria-live', 'assertive');
  toastElement.setAttribute('aria-atomic', 'true');
  
  toastElement.innerHTML = `
    <div class="d-flex">
      <div class="toast-body">
        ${message}
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  `;
  
  toastContainer.appendChild(toastElement);
  
  // 手动显示提示
  toastElement.classList.add('show');
  
  // 如果需要自动隐藏
  if (autoHide) {
    setTimeout(() => {
      toastElement.classList.remove('show');
      setTimeout(() => {
        toastElement.remove();
      }, 300); // 等待淡出动画完成
    }, 3000);
  }
  
  // 关闭按钮事件
  const closeButton = toastElement.querySelector('.btn-close');
  if (closeButton) {
    closeButton.addEventListener('click', () => {
      toastElement.classList.remove('show');
      setTimeout(() => {
        toastElement.remove();
      }, 300); // 等待淡出动画完成
    });
  }
  
  return toastElement;
}

/**
 * 创建新会话
 */
function createNewChat() {
  // 移除所有会话项的活跃状态
  document.querySelectorAll('.chat-item').forEach(item => {
    item.classList.remove('active');
  });
  
  // 重置当前会话ID
  currentSessionId = null;
  
  // 显示欢迎消息
  showWelcomeMessage();
  
  // TODO: 调用创建会话API
  console.log('创建新会话');
  
  // 关闭移动端侧边栏
  const sidebar = document.getElementById('sidebar');
  if (sidebar && window.innerWidth < 768) {
    sidebar.classList.remove('show');
  }
}

/**
 * 用户头像和AI头像
 */
const userAvatar = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80";
const aiAvatar = "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80";

/**
 * 当前时间格式化
 * @returns {string} 格式化后的时间字符串
 */
function getCurrentTime() {
  const now = new Date();
  return now.getHours() + ":" + now.getMinutes().toString().padStart(2, '0');
}

/**
 * 添加消息到聊天界面
 * @param {string} content - 消息内容
 * @param {boolean} isUser - 是否为用户消息
 * @returns {HTMLElement} - 消息DOM元素
 */
function addMessage(content, isUser = false) {
  const chatMessages = document.querySelector('.chat-messages');
  if (!chatMessages) return null;
  
  const messageDiv = document.createElement('div');
  messageDiv.className = `message ${isUser ? 'user' : 'ai'}`;
  
  const messageContent = document.createElement('div');
  messageContent.className = 'message-content';
  messageContent.innerHTML = content;
  
  const messageTime = document.createElement('div');
  messageTime.className = 'message-time';
  messageTime.textContent = getCurrentTime();
  
  const avatar = document.createElement('img');
  avatar.className = 'avatar';
  avatar.src = isUser ? userAvatar : aiAvatar;
  avatar.alt = isUser ? 'User' : 'AI';
  
  messageDiv.appendChild(messageContent);
  messageDiv.appendChild(messageTime);
  messageDiv.appendChild(avatar);
  
  chatMessages.appendChild(messageDiv);
  
  // 滚动到底部
  chatMessages.scrollTop = chatMessages.scrollHeight;
  
  return messageDiv;
}

// 向API发送消息并处理流式响应
async function sendMessageToAPI(message) {
    const chatMessages = document.querySelector('.chat-messages');
    // 创建AI回复消息
    const aiMessageDiv = addMessage('', false);
    const aiMessageContent = aiMessageDiv.querySelector('.message-content');
    
    // 创建思考过程和回复内容的容器
    const thinkingContainer = document.createElement('div');
    thinkingContainer.className = 'thinking-container';
    thinkingContainer.style.marginBottom = '10px';
    
    const responseContainer = document.createElement('div');
    responseContainer.className = 'response-container';
    
    // 添加到消息内容区域
    aiMessageContent.appendChild(thinkingContainer);
    aiMessageContent.appendChild(responseContainer);
    
    // 显示思考中状态
    thinkingContainer.innerHTML = '<div class="thinking">思考中<span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></div>';
    
    // 样式已在HTML头部定义，无需动态添加
    
    // 准备表单数据
    const formData = new FormData();
    formData.append('sessionId', currentSessionId); // 这里应该使用实际的会话ID
    formData.append('content', message);
    formData.append('type', 'text');
    
    // 获取选项
    const deepThinking = document.getElementById('deepThinking').checked;
    const webSearch = document.getElementById('webSearch').checked;
    const options = JSON.stringify({
        deepThinking: deepThinking,
        webSearch: webSearch
    });
    formData.append('options', options);
    
    // 获取选中的模型
    const modelSelector = document.querySelector('.model-selector select');
    const selectedModel = modelSelector.options[modelSelector.selectedIndex].text;
    
    try {
        // 移除思考中的动画
        thinkingContainer.innerHTML = '<div class="thinking-title">思考过程：</div><div class="thinking-content"></div>';
        const thinkingContent = thinkingContainer.querySelector('.thinking-content');
        
        let thinkingHistory = '';
        
        // 使用http.js中的sendChatMessage方法
        await sendChatMessage(formData, {
            onThinking: (data) => {
                // 累积思考过程
                thinkingHistory += data;
                thinkingContent.innerHTML += data;
            },
            onContent: (data, fullText) => {
                // 更新内容
                responseContainer.innerHTML = fullText;
            },
            onDone: (data) => {
                console.log('消息完成', data);
                
                // 如果没有思考过程，隐藏思考容器
                if (!thinkingHistory) {
                    thinkingContainer.style.display = 'none';
                }
            },
            onError: (errorMsg) => {
                // 显示错误消息
                responseContainer.innerHTML = `<div class="error-message">发送失败: ${errorMsg}</div>`;
                thinkingContainer.style.display = 'none';
            }
        });
        
        // 滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
    } catch (error) {
        console.error('发送消息失败:', error);
        aiMessageContent.innerHTML = `<div class="error">发送消息失败: ${error.message}</div>`;
    }
}

/**
 * 模拟流式响应（保留此函数用于测试）
 * @param {string} message - 用户消息内容
 */
async function simulateStreamResponse(message) {
  // 创建AI回复消息
  const aiMessageDiv = addMessage('', false);
  const aiMessageContent = aiMessageDiv.querySelector('.message-content');
  
  // 模拟思考中状态
  aiMessageContent.innerHTML = '<span class="thinking">思考中<span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>';
  
  // 样式已在HTML头部定义，无需动态添加
  
  // 模拟思考时间
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // 获取模型选择
  const selectedModel = document.querySelector('.model-selector select')?.value || 'GPT-4';
  
  // 清除思考中状态
  aiMessageContent.innerHTML = '';
  
  // 添加思考过程容器
  const thinkingProcess = document.createElement('div');
  thinkingProcess.className = 'thinking-process';
  aiMessageContent.appendChild(thinkingProcess);
  
  // 模拟思考过程
  let thinkingSteps = [];
  if (message.toLowerCase().includes('你好') || message.toLowerCase().includes('hello')) {
    thinkingSteps = [
      "检测到问候语，准备友好回应...",
      "确认当前使用的模型是" + selectedModel + "...",
      "生成适当的问候回复..."
    ];
  } else if (message.toLowerCase().includes('天气')) {
    thinkingSteps = [
      "识别到关于天气的查询...",
      "检查是否包含特定城市信息...",
      "未找到具体城市，准备通用天气回复...",
      "整合天气相关信息..."
    ];
  } else if (message.toLowerCase().includes('推荐') || message.toLowerCase().includes('建议')) {
    thinkingSteps = [
      "分析用户请求中的推荐/建议需求...",
      "确定这是一个需要结构化回答的问题...",
      "准备建议框架...",
      "生成建议步骤..."
    ];
  } else {
    thinkingSteps = [
      "分析用户输入: \"" + message + "\"...",
      "确定问题类型和领域...",
      "搜索相关知识库...",
      "组织回复结构..."
    ];
  }
  
  // 逐步显示思考过程
  for (let i = 0; i < thinkingSteps.length; i++) {
    thinkingProcess.innerHTML += thinkingSteps[i];
    await new Promise(resolve => setTimeout(resolve, 800));
    thinkingProcess.innerHTML += "<br>";
    // 滚动到底部
    const chatMessages = document.querySelector('.chat-messages');
    if (chatMessages) {
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }
  }
  
  // 准备回复内容
  let response = '';
  
  // 根据不同的消息类型生成不同的回复
  if (message.toLowerCase().includes('你好') || message.toLowerCase().includes('hello')) {
    response = `<p>你好！我是基于${selectedModel}的AI助手。很高兴能和你交流。有什么我可以帮助你的吗？</p>`;
  } else if (message.toLowerCase().includes('天气')) {
    response = `
      <p>关于天气的查询，我需要知道具体的城市才能提供准确信息。不过，我可以告诉你如何查询天气：</p>
      <ol>
        <li>可以使用天气App查看实时天气预报</li>
        <li>访问气象局官方网站获取权威预报</li>
        <li>关注当地新闻媒体的天气播报</li>
      </ol>
      <p>如果你想知道特定城市的天气，请告诉我城市名称，我会尽力提供相关信息。</p>
    `;
  } else if (message.toLowerCase().includes('推荐') || message.toLowerCase().includes('建议')) {
    response = `
      <p>根据你的请求，这里有一些建议：</p>
      <ul>
        <li><strong>了解需求</strong>：明确你的具体需求和目标</li>
        <li><strong>收集信息</strong>：从多个渠道获取相关信息</li>
        <li><strong>比较选择</strong>：对比不同选项的优缺点</li>
        <li><strong>做出决定</strong>：基于分析结果做出合理选择</li>
      </ul>
      <p>如果你能提供更具体的信息，我可以给出更有针对性的建议。</p>
    `;
  } else {
    response = `
      <p>我理解你的问题是关于"${message}"。这是一个很好的问题！</p>
      <p>根据我的分析，这个问题涉及到多个方面。我建议从以下几个角度思考：</p>
      <ol>
        <li>基本概念和定义</li>
        <li>相关背景和历史</li>
        <li>当前研究和应用</li>
        <li>未来发展趋势</li>
      </ol>
      <p>你对哪个方面更感兴趣？我可以提供更详细的信息。</p>
    `;
  }
  
  // 添加回复内容
  const responseDiv = document.createElement('div');
  responseDiv.className = 'response-content';
  responseDiv.innerHTML = response;
  aiMessageContent.appendChild(responseDiv);
  
  // 滚动到底部
  const chatMessages = document.querySelector('.chat-messages');
  if (chatMessages) {
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
}

// 绑定聊天项点击事件
document.addEventListener('DOMContentLoaded', function() {
  // 绑定聊天项点击事件
  document.querySelectorAll('.chat-item').forEach(item => {
    item.addEventListener('click', function(e) {
      // 如果点击的是菜单或菜单项，不处理
      if (e.target.closest('.chat-item-menu') || e.target.closest('.dropdown-menu')) {
        return;
      }
      
      // 移除其他项的活动状态
      document.querySelectorAll('.chat-item.active').forEach(activeItem => {
        activeItem.classList.remove('active');
      });
      
      // 设置当前项为活动状态
      this.classList.add('active');
      
      // 更新顶部标题
      const titleText = this.querySelector('.title').textContent;
      document.querySelector('#currentChatTitle span').textContent = titleText;
    });
  });
  
  // 绑定标题编辑图标点击事件
  const titleEditIcon = document.querySelector('#currentChatTitle i.fa-edit');
  if (titleEditIcon) {
    titleEditIcon.addEventListener('click', () => {
      if (currentSessionId) {
        editChatSession(currentSessionId);
      } else {
        showToast('请先选择或创建一个会话', 'warning');
      }
    });
  }
});